import { VC, Component } from '@/VC-vue'
import './index.styl'
import bar from '@/components/charts/bar.vue'
import { serchReport } from '../../services/control'
import { Toast } from 'mand-mobile'
import { parseTime } from '@/utils/common'
import noDataImg from './../../assets/img/noFavorIcon.png'

@Component({
    components: { bar }
})
export default class Done extends VC {
    // 是否显示日期选择框
    showDate: boolean = false
    // 日期选择框的属性设置
    dateOpt: any = {
        // 最小日期
        min: new Date('2000-01-01'),
        // 最大日期
        max: new Date('2100-09-09'),
        // 当前日期
        current: new Date()
    }
    // 传递到图表组件的数据
    topData: any[] = []
    // 当前选中的月份
    chooseTime: any = parseTime(new Date(), '{y}-{m}')
    // 控制显示图表 数据加载完成后再显示图表
    showBar: boolean = false
    /**
     * 展示日期选择
     * @memberof Done
     */
    handleShowDate() {
        this.showDate = true
    }
    /**
     * 根据月份加载数据
     * @memberof Done
     */
    _initData() {
        Toast.loading('正在加载图表...')
        this.showBar = false
        const params = {
            beginTime: this.chooseTime,
            endTime: this.chooseTime,
            timeType: 'M',
            statusOperatorId: '16',
            startPage: 1,
            pageSize: 999
        }
        serchReport(params).then(res => {
            if (res.data) {
                this.topData = res.data[0]
                this.showBar = true
                Toast.hide()
            } else {
                Toast.failed('暂无该月份数据')
            }
        })
    }
    mounted() {
        this._initData()
    }
    /**
     * 选中某个月份的事件
     * @param {*} timeArray
     * @memberof Done
     */
    handleChooseTime(timeArray: any) {
        const year = timeArray[0].value
        let month = timeArray[1].value
        if (month < 10) {
            month = '0' + month
        }
        const time = new Date(year + '-' + month)
        this.chooseTime = parseTime(time, '{y}-{m}')
        this._initData()
    }
    /**
     * 渲染页面
     * @returns
     * @memberof Done
     */
    renderResult() {
        return (
            <div class="task-container">
                <div class="search-task">
                    <div class="task-r" onclick={this.handleShowDate}>
                        <span>{this.chooseTime}</span>
                        <md-icon name="arrow-down" size="small" />
                    </div>
                    <md-date-picker
                        ref="datePicker"
                        type="custom"
                        custom-types={['yyyy', 'MM']}
                        v-model={this.showDate}
                        today-text="今天"
                        min-date={this.dateOpt.min}
                        max-date={this.dateOpt.max}
                        default-date={this.dateOpt.current}
                        onconfirm={this.handleChooseTime}
                    />
                </div>
                <div class="bar_main">
                    <div class="bar_title">质控病人图表</div>
                    {this.showBar ? (
                        <bar id="bar" data={this.topData} type="top" />
                    ) : (
                        <div class="no-data">
                            <img src={noDataImg} />
                            <p>暂无记录</p>
                        </div>
                    )}
                </div>

                <div class="bar_main">
                    <div class="bar_title">处理完成图表</div>
                    {this.showBar ? (
                        <bar id="no-bar" type="bottom" data={this.topData} />
                    ) : (
                        <div class="no-data">
                            <img src={noDataImg} />
                            <p>暂无记录</p>
                        </div>
                    )}
                </div>
            </div>
        )
    }

    render() {
        return <div>{this.renderResult()}</div>
    }
}
